/**
 * 测试数据
*/
const data = [
  {name:'电脑',price:200,count:1},
  {name:'水杯',price:10,count:10},
  {name:'笔记本',price:2,count:15},
  {name:'鼠标',price:50,count:1},
  {name:'手机',price:4000,count:1}
]

// 将data中所有的数据渲染到页面的表格中去
window.onload = function(){ // 浏览器加载完成页面的资源后触发的事件
  const tab_body = document.querySelector('#tab_body')
  // 遍历数据，得到每一个产品的对象
  data.forEach(goods => {
    let template = `
                    <tr>
                      <td><input type="checkbox" name="ch"></td>
                      <td>${goods.name}</td>
                      <td class="price">${goods.price}</td>
                      <td>
                          <button class="minus" onclick="minus(this)">-</button>
                          <span class="count">${goods.count}</span>
                          <button class="plus" onclick="plus(this)">+</button>
                      </td>
                      <td class="total">${goods.price * goods.count}</td>
                      <td>
                          <a href="javascript:void(0)" onclick="removeRow(this)">删除</a>
                      </td>
                  </tr>`
	// 为tab_body标签追加模板字符串
    tab_body.innerHTML = tab_body.innerHTML + template
  })
  
  init()
  
  
  document.querySelector("#all").onclick=function(e){
	  if(e.target.checked==true){
		Array.from(document.querySelectorAll("input[type=checkbox]")).map(v=>{
			v.checked=true
		})  
	  }else{
		Array.from(document.querySelectorAll("input[type=checkbox]")).map(v=>{
			v.checked=false
		})
	  }

  }
}

function minus(target){
  // console.log('你点击了减号',target);
  // target是当前触发事件的标签对象

  // 得到当前触发事件的按钮下一个兄弟节点span
  let span = target.nextElementSibling
  // 得到span的文本，并转换为number
  let count = Number(span.innerHTML)
  if (count > 1) { // 当count大于1时，才能够递减
    count--
    // 将修改后的count设置回span
    span.innerHTML = count

    // 得到减号按钮的父级td
    let td = target.parentElement
    // 得到父级td上一个兄弟节点；单价td
    let price_td = td.previousElementSibling
    // 得到单价
    let price = Number(price_td.innerHTML)
    // 单价 * 数量得到小计
    let total = price * count

    // 得到小计的td
    let total_td = td.nextElementSibling
    total_td.innerHTML = total

    // 计算总价
    let sum_total = document.querySelectorAll('.total')
    let sum = Array.from(sum_total)
         .map(tag => Number(tag.innerHTML)) // 获取每一个小计，转换为数字
         // 将所有的数字汇总
         .reduce((price1,price2) => price1 + price2)
    document.querySelector('.totalPrice').innerHTML = sum
  }
  
  init()
}

function plus(target){
	
  // console.log('你点击了加号',target);
  // 得到当前触发事件的按钮的上一个兄弟节点
  let span = target.previousElementSibling
  let count = Number(span.innerHTML)
  span.innerHTML = count + 1
  nextEle=target.parentElement.nextElementSibling
  parentEle=target.parentElement.previousElementSibling
  
  sum=parseInt(span.innerText)*parseInt(parentEle.innerText)
  nextEle.innerHTML=sum
  
  init()
}

function removeRow(target){
	reduce=parseInt(target.parentElement.previousElementSibling.innerHTML)
	totalPrice=document.querySelector(".totalPrice")
	target.parentElement.parentElement.remove()
	totalPrice.innerText=parseInt(totalPrice.innerText)-reduce
	// 当前触发事件的标签
	console.log(target);
}

function init(){
	count=0;
	goodsEle=document.querySelectorAll("tr")
	Array.from(goodsEle).filter((value,index,arr)=>{return index!=0}).map(v=>{
		console.log(v.children[3].getElementsByClassName("count")[0].innerText)
		count+=parseInt(v.children[3].getElementsByClassName("count")[0].innerText)*parseInt(v.children[2].innerText)
	
	})
	document.querySelector(".totalPrice").innerText=count
}



